<template>
    <div class="topicdetail">
       <div class="head">
            <van-nav-bar
            title="分类详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="contentbox" v-html="this.current.content"></div>
        <div class="list">
            <p class="topic-title">专题推荐</p>
            <div v-for="item in recommendList" :key="item.id" class="single">
                <img :src="item.scene_pic_url" alt="">
                <p>{{item.title}}</p>  
            </div>
        </div>
    </div>
</template>

<script>
import {detailaction} from '@/api/topic'
    export default {
        data() {
            return {
                current:{},
                recommendList:[]
            }
        },
        methods: {
             onClickLeft(){
                this.$router.go(-1);
                this.$store.commit('setInfo',"")
            
            },
        },
        created() {
            detailaction({
                id:this.$route.query.id
            })
            .then(res=>{
                console.log(res);
                this.current=res.data
                this.recommendList=res.recommendList
                
            })
        },
       
                
        
    
        
    }
</script>

<style lang="scss" scoped>
.topicdetail{
     background: #f4f4f4;
}
.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.contentbox {
    margin-top: 50px;
    width: 375px;
}
.list{
    .topic-title{
        text-align: center;
        background: #f4f4f4;
        font-size: 15px;
        color: #999;
        padding: 15px 0;
    }
    .single{
        width: 100%;
        padding: 12px 12px 15px 12px;
        margin-bottom: 15px;
        background: #fff;
        box-sizing: border-box;

        img{
            width: 321px;
            height: 139px;
        }

        p{
            width: 321px;
            display: block;
            margin: 0 auto;
            margin-top: 15px;
            font-size: 14px;
            font-weight: 700;
            text-align: left;
        }
    }
}
  
</style>